<template>
  <div class='statistic-page'>
    <LayoutContainer >
      <div class="p-24">
        <!-- 添加统计卡片 -->
        <div class="statistics-cards mb-8">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-card shadow="hover" class="statistics-card">
                <template #header>
                  <div class="card-header">
                    <span>{{ $t('views.statistics.appCount') }}</span>
                  </div>
                </template>
                <div class="card-content">
                  <div class="stats-info">
                    <div class="created">
                      <span class="label">{{ $t('views.statistics.created') }}</span>
                      <span class="value">{{ totalStats.appsCreated || 0 }}</span>
                    </div>
                    <div class="updated">
                      <span class="label">{{ $t('views.statistics.updated') }}</span>
                      <span class="value">{{ totalStats.appsUpdated || 0 }}</span>
                    </div>
                  </div>
                  <el-icon class="icon"><Platform /></el-icon>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover" class="statistics-card">
                <template #header>
                  <div class="card-header">
                    <span>{{ $t('views.statistics.datasetCount') }}</span>
                  </div>
                </template>
                <div class="card-content">
                  <div class="stats-info">
                    <div class="created">
                      <span class="label">{{ $t('views.statistics.created') }}</span>
                      <span class="value">{{ totalStats.datasetsCreated || 0 }}</span>
                    </div>
                    <div class="updated">
                      <span class="label">{{ $t('views.statistics.updated') }}</span>
                      <span class="value">{{ totalStats.datasetsUpdated || 0 }}</span>
                    </div>
                  </div>
                  <el-icon class="icon"><DataLine /></el-icon>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover" class="statistics-card">
                <template #header>
                  <div class="card-header">
                    <span>{{ $t('views.statistics.documentCount') }}</span>
                  </div>
                </template>
                <div class="card-content">
                  <div class="stats-info">
                    <div class="created">
                      <span class="label">{{ $t('views.statistics.created') }}</span>
                      <span class="value">{{ totalStats.documentsCreated || 0 }}</span>
                    </div>
                    <div class="updated">
                      <span class="label">{{ $t('views.statistics.updated') }}</span>
                      <span class="value">{{ totalStats.documentsUpdated || 0 }}</span>
                    </div>
                  </div>
                  <el-icon class="icon"><Document /></el-icon>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover" class="statistics-card">
                <template #header>
                  <div class="card-header">
                    <span>{{ $t('views.statistics.chatCount') }}</span>
                  </div>
                </template>
                <div class="card-content">
                  <div class="stats-info">
                    <div class="created">
                      <span class="label">{{ $t('views.statistics.created') }}</span>
                      <span class="value">{{ totalStats.chatsCreated || 0 }}</span>
                    </div>
                    <div class="updated">
                      <span class="label">{{ $t('views.statistics.updated') }}</span>
                      <span class="value">{{ totalStats.chatsUpdated || 0 }}</span>
                    </div>
                  </div>
                  <el-icon class="icon"><ChatDotRound /></el-icon>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 搜索区域美化 -->
        <div class="search-section mb-16 p-16 bg-white rounded-lg">
          <div class="flex-between">
            <div class="flex-start">
              <el-date-picker
                v-model="dateRange"
                type="datetimerange"
                :start-placeholder="$t('views.statistics.startTime')"
                :end-placeholder="$t('views.statistics.endTime')"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                clearable
                :shortcuts="shortcuts"
                class="w-400"
              />
              <el-button type="primary" class="ml-12" @click="getList">
                <el-icon class='mr-4'><Search /></el-icon>
                {{ $t('common.query') }}
              </el-button>
            </div>
            <div>
              <el-button type="success" @click="exportData">
                <el-icon class='mr-4'><Download /></el-icon>
                {{ $t('common.export') }}
              </el-button>
            </div>
          </div>
        </div>

        <!-- 表格美化 -->
        <el-card shadow="never">
          <app-table
            :data="tableData"
            v-loading="loading"
            :border="true"
            stripe
            class="statistic-table"
          >
            <el-table-column :label="$t('common.index')">
                <template #default="{ $index }">
                    {{ $index + 1}}
                </template>
            </el-table-column>
            <el-table-column prop="username" :label="$t('views.user.userForm.form.username.label')" />
            <el-table-column prop="nick_name" :label="$t('views.user.userForm.form.nick_name.label')" />
            <el-table-column :label="$t('views.statistics.appCount')" sortable :sort-method="(a: any, b: any) => sortByTotal(a, b, 'app')">
              <template #default="{ row }">
                <div class="count-info">
                  <div class="created">
                    <span class="label">{{ $t('views.statistics.created') }}:</span>
                    <span class="value">{{ row.app_created_count }}</span>
                  </div>
                  <div class="updated">
                    <span class="label">{{ $t('views.statistics.updated') }}:</span>
                    <span class="value">{{ row.app_updated_count }}</span>
                  </div>
                  <div class="total">
                    <span class="label">{{ $t('common.total') }}:</span>
                    <span class="value">{{ row.app_created_count + row.app_updated_count }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('views.statistics.datasetCount')" sortable :sort-method="(a: any, b: any) => sortByTotal(a, b, 'dataset')">
              <template #default="{ row }">
                <div class="count-info">
                  <div class="created">
                    <span class="label">{{ $t('views.statistics.created') }}:</span>
                    <span class="value">{{ row.dataset_created_count }}</span>
                  </div>
                  <div class="updated">
                    <span class="label">{{ $t('views.statistics.updated') }}:</span>
                    <span class="value">{{ row.dataset_updated_count }}</span>
                  </div>
                  <div class="total">
                    <span class="label">{{ $t('common.total') }}:</span>
                    <span class="value">{{ row.dataset_created_count + row.dataset_updated_count }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('views.statistics.documentCount')" sortable :sort-method="(a: any, b: any) => sortByTotal(a, b, 'document')">
              <template #default="{ row }">
                <div class="count-info">
                  <div class="created">
                    <span class="label">{{ $t('views.statistics.created') }}:</span>
                    <span class="value">{{ row.document_created_count }}</span>
                  </div>
                  <div class="updated">
                    <span class="label">{{ $t('views.statistics.updated') }}:</span>
                    <span class="value">{{ row.document_updated_count }}</span>
                  </div>
                  <div class="total">
                    <span class="label">{{ $t('common.total') }}:</span>
                    <span class="value">{{ row.document_created_count + row.document_updated_count }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('views.statistics.chatCount')" sortable :sort-method="(a: any, b: any) => sortByTotal(a, b, 'chat')">
              <template #default="{ row }">
                <div class="count-info">
                  <div class="created">
                    <span class="label">{{ $t('views.statistics.created') }}:</span>
                    <span class="value">{{ row.chat_created_count }}</span>
                  </div>
                  <div class="updated">
                    <span class="label">{{ $t('views.statistics.updated') }}:</span>
                    <span class="value">{{ row.chat_updated_count }}</span>
                  </div>
                  <div class="total">
                    <span class="label">{{ $t('common.total') }}:</span>
                    <span class="value">{{ row.chat_created_count + row.chat_updated_count }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('views.statistics.chatRecordCount')" sortable :sort-method="(a: any, b: any) => sortByTotal(a, b, 'chat_record')">
              <template #default="{ row }">
                <div class="count-info">
                  <div class="created">
                    <span class="label">{{ $t('views.statistics.created') }}:</span>
                    <span class="value">{{ row.chat_record_created_count }}</span>
                  </div>
                  <div class="updated">
                    <span class="label">{{ $t('views.statistics.updated') }}:</span>
                    <span class="value">{{ row.chat_record_updated_count }}</span>
                  </div>
                  <div class="total">
                    <span class="label">{{ $t('common.total') }}:</span>
                    <span class="value">{{ row.chat_record_created_count + row.chat_record_updated_count }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('common.operation')" width="80" fixed="right">
              <template #default="{ row }">
                <el-button 
                  type="primary" 
                  link
                  @click="showDetail(row)"
                >
                  {{ $t('common.detail') }}
                </el-button>
              </template>
            </el-table-column>
          </app-table>
        </el-card>
      </div>
    </LayoutContainer>

    <!-- 添加详情对话框组件 -->
    <el-dialog
      v-model="detailVisible"
      :title="$t('views.statistics.userDetail')"
      width="800px"
    >
      <div v-if="currentDetail" class="detail-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item :label="$t('views.user.userForm.form.username.label')">
            {{ currentDetail.username }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('views.user.userForm.form.nick_name.label')">
            {{ currentDetail.nick_name }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="detail-section">
          <h3>{{ $t('views.statistics.appDetail') }}</h3>
          <div class="detail-summary">
            <div class="summary-item">
              <span class="label">{{ $t('views.statistics.created') }}:</span>
              <span class="value created">{{ currentDetail.apps?.filter(app => app.is_created).length || 0 }}</span>
            </div>
            <div class="summary-item">
              <span class="label">{{ $t('views.statistics.updated') }}:</span>
              <span class="value updated">{{ currentDetail.apps?.filter(app => app.is_updated).length || 0 }}</span>
            </div>
          </div>
          <el-table :data="currentDetail.apps" border stripe>
            <el-table-column prop="name" :label="$t('views.statistics.name')" />
            <el-table-column :label="$t('views.statistics.status')" width="150">
              <template #default="{ row }">
                <div class="status-tags">
                  <el-tag v-if="row.is_created" type="success" size="small">{{ $t('views.statistics.created') }}</el-tag>
                  <el-tag v-if="row.is_updated" type="primary" size="small">{{ $t('views.statistics.updated') }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('views.statistics.createTime')">
              <template #default="{ row }">
                <div v-if="row.is_created" class="time-info">
                {{ datetimeFormat(row.create_time) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('views.statistics.updateTime')">
              <template #default="{ row }">
                <div v-if="row.is_updated" class="time-info">
                  {{ datetimeFormat(row.update_time) }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="detail-section">
          <h3>{{ $t('views.statistics.datasetDetail') }}</h3>
          <div class="detail-summary">
            <div class="summary-item">
              <span class="label">{{ $t('views.statistics.created') }}:</span>
              <span class="value created">{{ currentDetail.datasets?.filter(dataset => dataset.is_created).length || 0 }}</span>
            </div>
            <div class="summary-item">
              <span class="label">{{ $t('views.statistics.updated') }}:</span>
              <span class="value updated">{{ currentDetail.datasets?.filter(dataset => dataset.is_updated).length || 0 }}</span>
            </div>
          </div>
          <el-table :data="currentDetail.datasets" border stripe>
            <el-table-column prop="name" :label="$t('views.statistics.name')" />
            <el-table-column :label="$t('views.statistics.status')" width="150">
              <template #default="{ row }">
                <div class="status-tags">
                  <el-tag v-if="row.is_created" type="success" size="small">{{ $t('views.statistics.created') }}</el-tag>
                  <el-tag v-if="row.is_updated" type="primary" size="small">{{ $t('views.statistics.updated') }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('views.statistics.createTime')">
              <template #default="{ row }">
                <div v-if="row.is_created" class="time-info">
                {{ datetimeFormat(row.create_time) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('views.statistics.updateTime')">
              <template #default="{ row }">
                <div v-if="row.is_updated" class="time-info">
                  {{ datetimeFormat(row.update_time) }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="detail-section">
          <h3>{{ $t('views.statistics.documentDetail') }}</h3>
          <div class="detail-summary">
            <div class="summary-item">
              <span class="label">{{ $t('views.statistics.created') }}:</span>
              <span class="value created">{{ currentDetail.documents?.filter(doc => doc.is_created).length || 0 }}</span>
            </div>
            <div class="summary-item">
              <span class="label">{{ $t('views.statistics.updated') }}:</span>
              <span class="value updated">{{ currentDetail.documents?.filter(doc => doc.is_updated).length || 0 }}</span>
            </div>
          </div>
          <el-table :data="currentDetail.documents" border stripe>
            <el-table-column prop="name" :label="$t('views.statistics.name')" />
            <el-table-column :label="$t('views.statistics.status')" width="150">
              <template #default="{ row }">
                <div class="status-tags">
                  <el-tag v-if="row.is_created" type="success" size="small">{{ $t('views.statistics.created') }}</el-tag>
                  <el-tag v-if="row.is_updated" type="primary" size="small">{{ $t('views.statistics.updated') }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('views.statistics.createTime')">
              <template #default="{ row }">
                <div v-if="row.is_created" class="time-info">
                {{ datetimeFormat(row.create_time) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('views.statistics.updateTime')">
              <template #default="{ row }">
                <div v-if="row.is_updated" class="time-info">
                  {{ datetimeFormat(row.update_time) }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import statisticsApi from '@/api/statistics'
import type { StatisticsData } from '@/api/statistics'
import "@/layout/layout-template/index.scss"
import { useI18n } from 'vue-i18n'
import { Platform, DataLine, ChatDotRound, Document, Search, Download } from '@element-plus/icons-vue'
import { datetimeFormat } from '@/utils/time'
const { t } = useI18n()
const loading = ref(false)
const tableData = ref<StatisticsData[]>([])
const searchValue = ref('')
const timeField = ref('update_time')

// 设置默认时间范围为最近一周
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
const dateRange = ref<[string, string] | null>([
  start.toISOString().slice(0, 19).replace('T', ' '),
  end.toISOString().slice(0, 19).replace('T', ' ')
])

// 修改总计统计数据的结构
const totalStats = ref({
  appsCreated: 0,
  appsUpdated: 0,
  datasetsCreated: 0,
  datasetsUpdated: 0,
  documentsCreated: 0,
  documentsUpdated: 0,
  chatsCreated: 0,
  chatsUpdated: 0
})

// 将快捷选项提取为变量
const shortcuts = [
  {
    text: '今天',
    value: () => {
      const start = new Date(new Date().setHours(0, 0, 0, 0))
      const end = new Date(new Date().setHours(23, 59, 59, 999))
      return [start, end]
    },
  },
  {
    text: '昨天',
    value: () => {
      const start = new Date(new Date().setHours(0, 0, 0, 0))
      const end = new Date(new Date().setHours(23, 59, 59, 999))
      start.setTime(start.getTime() - 3600 * 1000 * 24)
      end.setTime(end.getTime() - 3600 * 1000 * 24)
      return [start, end]
    },
  },
  {
    text: '前天',
    value: () => {
      const start = new Date(new Date().setHours(0, 0, 0, 0))
      const end = new Date(new Date().setHours(23, 59, 59, 999))
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
      end.setTime(end.getTime() - 3600 * 1000 * 24 * 2)
      return [start, end]
    },
  },
  {
    text: '最近三天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
      return [start, end]
    },
  },
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  }
]

function handleDateChange(val: [string, string] | null) {
  if (val) {
    dateRange.value = val
  } else {
    dateRange.value = null
  }
  // 移除自动查询，改为点击按钮时查询
  // getList()
}

function searchHandle() {
  // 移除自动查询，改为点击按钮时查询
  // getList()
}

function getList() {
  const params: any = {}
  
  if (searchValue.value) {
    params.username = searchValue.value
  }
  
  if (dateRange.value && dateRange.value.length === 2) {
    params.start_time = dateRange.value[0]
    params.end_time = dateRange.value[1]
  }

  params.time_field = timeField.value
  
  return statisticsApi.getStatistics(params, loading).then((res) => {
    tableData.value = res.data
    // 计算总计数据
    totalStats.value = {
      appsCreated: res.data.reduce((sum: number, item: StatisticsData) => sum + item.app_created_count, 0),
      appsUpdated: res.data.reduce((sum: number, item: StatisticsData) => sum + item.app_updated_count, 0),
      datasetsCreated: res.data.reduce((sum: number, item: StatisticsData) => sum + item.dataset_created_count, 0),
      datasetsUpdated: res.data.reduce((sum: number, item: StatisticsData) => sum + item.dataset_updated_count, 0),
      documentsCreated: res.data.reduce((sum: number, item: StatisticsData) => sum + item.document_created_count, 0),
      documentsUpdated: res.data.reduce((sum: number, item: StatisticsData) => sum + item.document_updated_count, 0),
      chatsCreated: res.data.reduce((sum: number, item: StatisticsData) => sum + item.chat_created_count, 0),
      chatsUpdated: res.data.reduce((sum: number, item: StatisticsData) => sum + item.chat_updated_count, 0)
    }
  })
}

// 添加排序方法
interface SortableRow {
  [key: string]: any;
}

// 根据创建数和更新数之和进行排序
function sortByTotal(a: SortableRow, b: SortableRow, type: string): number {
  const aTotal = a[`${type}_created_count`] + a[`${type}_updated_count`];
  const bTotal = b[`${type}_created_count`] + b[`${type}_updated_count`];
  return bTotal - aTotal; // 默认降序排列（从大到小）
}

// 修改过滤器的类型定义
interface StatItem {
  name: string;
  create_time: string;
  update_time: string;
  is_created: boolean;
  is_updated: boolean;
}

// 添加详情对话框控制变量
const detailVisible = ref(false)

interface DetailData {
  username: string;
  nick_name: string;
  apps: StatItem[];
  datasets: StatItem[];
  documents: StatItem[];
}

const currentDetail = ref<DetailData | null>(null)

// 显示详情方法
const showDetail = async (row: any) => {
  const params = {
    username: row.username,
    start_time: dateRange.value?.[0],
    end_time: dateRange.value?.[1]
  }
  
  loading.value = true
  try {
    const res = await statisticsApi.getStatisticsDetail(params)
    currentDetail.value = res.data
    detailVisible.value = true
  } catch (error) {
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 添加导出功能
function exportData() {
  // 准备CSV数据
  const headers = [
    t('views.user.userForm.form.username.label'),
    t('views.user.userForm.form.nick_name.label'),
    `${t('views.statistics.appCount')} - ${t('views.statistics.created')}`,
    `${t('views.statistics.appCount')} - ${t('views.statistics.updated')}`,
    `${t('views.statistics.appCount')} - ${t('common.total')}`,
    `${t('views.statistics.datasetCount')} - ${t('views.statistics.created')}`,
    `${t('views.statistics.datasetCount')} - ${t('views.statistics.updated')}`,
    `${t('views.statistics.datasetCount')} - ${t('common.total')}`,
    `${t('views.statistics.documentCount')} - ${t('views.statistics.created')}`,
    `${t('views.statistics.documentCount')} - ${t('views.statistics.updated')}`,
    `${t('views.statistics.documentCount')} - ${t('common.total')}`,
    `${t('views.statistics.chatCount')} - ${t('views.statistics.created')}`,
    `${t('views.statistics.chatCount')} - ${t('views.statistics.updated')}`,
    `${t('views.statistics.chatCount')} - ${t('common.total')}`,
    `${t('views.statistics.chatRecordCount')} - ${t('views.statistics.created')}`,
    `${t('views.statistics.chatRecordCount')} - ${t('views.statistics.updated')}`,
    `${t('views.statistics.chatRecordCount')} - ${t('common.total')}`,
  ].join(',');

  // 添加数据行
  const rows = tableData.value.map(item => {
    return [
      item.username,
      item.nick_name,
      item.app_created_count,
      item.app_updated_count,
      item.app_created_count + item.app_updated_count,
      item.dataset_created_count,
      item.dataset_updated_count,
      item.dataset_created_count + item.dataset_updated_count,
      item.document_created_count,
      item.document_updated_count,
      item.document_created_count + item.document_updated_count,
      item.chat_created_count,
      item.chat_updated_count,
      item.chat_created_count + item.chat_updated_count,
      item.chat_record_created_count,
      item.chat_record_updated_count,
      item.chat_record_created_count + item.chat_record_updated_count,
    ].join(',');
  });

  // 合并CSV内容
  const csvContent = [headers, ...rows].join('\n');
  
  // 创建Blob对象并下载
  const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  
  // 生成文件名：statistics_YYYY-MM-DD.csv
  const now = new Date();
  const date = now.toISOString().split('T')[0];
  const fileName = `statistics_${date}.csv`;
  
  link.href = url;
  link.setAttribute('download', fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

onMounted(() => {
  getList()
})

// 修改过滤器的类型
currentDetail.value?.apps?.filter((app: StatItem) => app.is_created)
currentDetail.value?.datasets?.filter((dataset: StatItem) => dataset.is_created)
currentDetail.value?.documents?.filter((doc: StatItem) => doc.is_created)
</script>

<style lang="scss" scoped>
.statistics-card {
  .card-header {
    font-size: 16px;
    color: #606266;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--el-border-color-lighter);
  }
  
  .card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 8px;
    
    .stats-info {
      .created, .updated {
        margin-bottom: 8px;
        
        .label {
          font-size: 14px;
          color: #909399;
          margin-right: 8px;
        }
        
        .value {
          font-size: 20px;
          font-weight: bold;
        }
      }
      
      .created .value {
        color: #67C23A; // 绿色表示创建
      }
      
      .updated .value {
        color: #409EFF; // 蓝色表示更新
      }
    }
    
    .icon {
      font-size: 32px;
      color: #909399;
      opacity: 0.7;
    }
  }

  &:hover {
    .icon {
      color: #409EFF;
      opacity: 1;
    }
  }
}

.search-section {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.statistics-table {
  tr {
    cursor: pointer;
    &:hover {
      background-color: #f5f7fa;
    }
  }
}

.el-card {
  --el-card-padding: calc(var(--app-base-px)) !important;
}

.app-table {
  // height: calc(100% - 586px) !important;
}

.count-info {
  .created, .updated, .total {
    display: flex;
    align-items: center;
    margin: 4px 0;
    
    .label {
      color: #909399;
      margin-right: 8px;
    }
    
    .value {
      font-weight: bold;
    }
  }
  
  .created .value {
    color: #67C23A;
  }
  
  .updated .value {
    color: #409EFF;
  }
  
  .total .value {
    color: #E6A23C; // 橙色表示总计
  }
}

.detail-content {
  .detail-section {
    margin-top: 24px;
    
    h3 {
      margin-bottom: 16px;
      font-size: 16px;
      color: #606266;
    }
  }
}

.detail-section {
  .detail-summary {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    
    .summary-item {
      display: flex;
      align-items: center;
      
      .label {
        color: #909399;
        margin-right: 8px;
      }
      
      .value {
        font-size: 16px;
        font-weight: bold;
        
        &.created {
          color: #67C23A;
        }
        
        &.updated {
          color: #409EFF;
        }
      }
    }
  }
  
  .status-tags {
    display: flex;
    gap: 8px;
  }
}

.time-info {
  display: flex;
  align-items: center;
  margin: 4px 0;
  
  .label {
    color: #909399;
    margin-right: 8px;
  }
  
  .value {
    color: #606266;
  }
}
</style> 
<style lang="scss">
.content-container,.el-scrollbar__view,.content-container__main,.el-card__body {
  height: 100%;
  >.p-24 {
    height: 100%;
    box-sizing: border-box;
    >.el-card {
      height: calc(100% - 250px);
      position: relative
    }
  }
}
.statistic-table {
  height: 100% !important;
  .el-table__body-wrapper {
    flex:none;
    height: calc(100% - 50px) !important;
  }
}

.statistic-page {
  height: 100%;
  padding: var(--app-view-padding) !important;
  box-sizing: border-box;
  .content-container {
    padding: 0 !important;
  }
}
</style>
